@extends('layouts.app')
@section('title', '查看分期付款')

@section('content')
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="card">
                <div class="card-header">
                    <h4>分期付款详情</h4>
                </div>
            </div>
            <div class="card-body">
                <div class="installment-top">
                    <div class="installment-info">
                        <div class="line">
                            <div class="line-label">商品订单: </div>
                            <div class="line-value">
                                <a target="_blank" href="{{ route('orders.show', ['order'=>$installment->order_id]) }}">查看</a>
                            </div>
                        </div>
                        <div class="line">
                            <div class="line-label">分期金额: </div>
                            <div class="line-value">￥ {{ $installment->total_amount }}</div>
                        </div>
                        <div class="line">
                            <div class="line-label">分期期限: </div>
                            <div class="line-value">{{ $installment->count }}期</div>
                        </div>
                        <div class="line">
                            <div class="line-label">分期费率: </div>
                            <div class="line-value">{{ $installment->fee_rate }}%</div>
                        </div>
                        <div class="line">
                            <div class="line-label">逾期费率: </div>
                            <div class="line-value">{{ $installment->fine_rate }}</div>
                        </div>
                        <div class="line">
                            <div class="line-label">当前状态</div>
                            <div class="line-value">{{ \App\Models\Installment::$statusMap[$installment->status] }}</div>
                        </div>
                    </div>
                    <div class="installment-next text-right">
{{--                        如果已经没有未还款的还款计划, 说明已经结清--}}
                        @if(is_null($nextItem))
                            <div class="installment-clear text-center">此订单已结清</div>
                        @else
                        <div>
                            <span>近期待还: </span>
                            <div class="value total-amount">￥{{ $nextItem->total }}</div>
                        </div>
                        <div>
                            <span>截止日期: </span>
                            <div class="value">{{ $nextItem->due_date->format('Y-m-d') }}</div>
                        </div>
                            <div class="payment-buttons">
                                <a class="btn btn-primary btn-sm" href="{{ route('installments.alipay', ['installment'=>$installment->id]) }}">支付宝支付</a>
                                <a class="btn btn-success btn-sm" href="">微信支付</a>
                            </div>
                            @endif
                    </div>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>期数</th>
                            <th>还款截止日期</th>
                            <th>状态</th>
                            <th>本金</th>
                            <th>手续费</th>
                            <th>逾期费</th>
                            <th class="text-right">小计</th>
                        </tr>
                    </thead>
                    @foreach($items as $item)
                        <tr>
                            <td>
                                {{ $item->sequence + 1 }} / {{ $installment->count }}期
                            </td>
                            <td>{{ $item->due_date->format('Y-m-d') }}</td>
                            <td>
{{--                                如果是未还款--}}
                                @if(is_null($item->paid_at))
{{--                                    这里使用了我们之前模型定义的访问器--}}
                                    @if($item->is_overdue)
                                        <span class="overdue">已逾期</span>
                                    @else
                                        <span class="needs-repay">待还款</span>
                                    @endif
                                @else
                                    <span class="repaid">已还款</span>
                                @endif
                            </td>
                            <td>￥{{ $item->base }}</td>
                            <td>￥{{ $item->fee }}</td>
                            <td>{{ is_null($item->fine) ? '无' : ('￥'.$item->fine) }}</td>
                            <td class="text-right">￥{{ $item->total }}</td>
                        </tr>
                    @endforeach
                    <tr><td colspan="7"></td></tr>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scriptsAfterJs')
<script>
    $(document).ready(function () {
        $('#btn-wechat').click(function () {
            swal({
                content: $('<img src="{{ route('installments.wechat', ['installment' => $installment->id]) }}" />')[0],
                // buttons 参数可以设置按钮显示的文案
                buttons: ['关闭', '已完成付款'],
            })
                .then(function (result) {
                    if (result) {
                        location.reload();
                    }
                })
        });
    });
</script>
@endsection
